<nz-layout class="app-layout">
  <nz-sider class="menu-sidebar"
            nzCollapsible
            nzWidth="256px"
            nzBreakpoint="md"
            [(nzCollapsed)]="isCollapsed"
            [nzTrigger]="null">
    <div class="sidebar-logo">

        <img src="/assets/imgs/logo/logo32.png" alt="logo">
        <h1>用户名</h1>


    </div>


    <ul nz-menu nzTheme="dark" nzMode="inline" [nzInlineCollapsed]="isCollapsed">
      <li nz-submenu nzClouse nzTitle="数据看板" nzIcon="dashboard">
        <ul>
          <li nz-menu-item nzMatchRouter>
            <a routerLink="/welcome">桌面</a>
          </li>

        </ul>
      </li>


      <li nz-submenu nzClouse nzTitle="考勤" nzIcon="book">
        <ul>
          <li nz-menu-item nzMatchRouter>
            <a routerLink="/attendance">考勤管理</a>
          </li>
        </ul>
      </li>


      <li nz-submenu nzClouse nzTitle="通知公告" nzIcon="bell">
        <ul>
          <li nz-menu-item nzMatchRouter>
            <a routerLink="/primeorg">公告管理</a>
          </li>
        </ul>
      </li>


      <li nz-submenu nzClouse nzTitle="公文管理" nzIcon="file-text">
        <ul>



          <li nz-menu-item nzMatchRouter>
            <a>发文</a>
          </li>

          <li nz-menu-item nzMatchRouter>
            <a>收文</a>
          </li>
        </ul>


          <li nz-submenu nzClouse nzTitle="行政管理" nzIcon="audit">
            <ul>



              <li nz-menu-item nzMatchRouter>
                <a>差旅管理</a>
              </li>

              <li nz-menu-item nzMatchRouter>
                <a>固定资产管理</a>
              </li>

              <li nz-menu-item nzMatchRouter>
                <a>公务车管理</a>
              </li>

              <li nz-menu-item nzMatchRouter>
                <a>项目管理</a>
              </li>

              <li nz-menu-item nzMatchRouter>
                <a>办公用品管理</a>
              </li>


              <li nz-menu-item nzMatchRouter>
                <a>设备保修管理</a>
              </li>

              <li nz-menu-item nzMatchRouter>
                <a>接待管理</a>
              </li>

        </ul>
      </li>





      <li nz-submenu nzClouse nzTitle="会议管理" nzIcon="team">
        <ul>



          <li nz-menu-item nzMatchRouter>
            <a>会议计划</a>
          </li>

          <li nz-menu-item nzMatchRouter>
            <a>会议组织</a>
          </li>

          <li nz-menu-item nzMatchRouter>
            <a>会议过程</a>
          </li>

          <li nz-menu-item nzMatchRouter>
            <a>会后落实</a>
          </li>
        </ul>





      <li nz-submenu nzClouse nzTitle="资金管理" nzIcon="account-book">
        <ul>



          <li nz-menu-item nzMatchRouter>
            <a>公积金管理</a>
          </li>

          <li nz-menu-item nzMatchRouter>
            <a>内部经费管理</a>
          </li>
        </ul>
    </li>



      <li nz-submenu nzClouse nzTitle="系统设置" nzIcon="setting">
        <ul>



          <li nz-menu-item nzMatchRouter>
            <a>用户管理</a>
          </li>

          <li nz-menu-item nzMatchRouter>
            <a>岗位管理</a>
          </li>


          <li nz-menu-item nzMatchRouter>
            <a>权限设置</a>
          </li>


          <li nz-menu-item nzMatchRouter>
            <a>数据备份</a>
          </li>

          <li nz-menu-item nzMatchRouter>
            <a>机构设置</a>
          </li>
          <li nz-menu-item nzMatchRouter>
            <a>通讯录设置</a>
          </li>

        </ul>
      </li>


    </ul>
  </nz-sider>
  <nz-layout>
    <nz-header>
      <div class="app-header">
        <span class="header-trigger" (click)="isCollapsed = !isCollapsed">
            <i class="trigger"
               nz-icon
               [nzType]="isCollapsed ? 'menu-unfold' : 'menu-fold'"
            ></i>
        </span>
      </div>
    </nz-header>
    <nz-content>
      <div class="inner-content">
        <nz-tabset [nzTabBarExtraContent]="extraTemplate"
                   nzType="editable-card"
                   (nzClose)="closeTab($event)"
                   [nzHideAdd]="true"
                   [nzSelectedIndex]="tabindex"
                   (nzSelectedIndexChange)="onTabChange($event)"
        >
          <nz-tab *ngFor="let tab of tabs" [nzTitle]="tab.title" [nzClosable]="tab.canclouse" >



            <!--<router-outlet></router-outlet>-->

          </nz-tab>
        </nz-tabset>


        <ng-template #extraTemplate>

          <button (click)="clouseAllTab()" nz-button nzType="default" nzDanger nzShape="circle"><i nz-icon nzType="close" ></i></button>
          <!--<button nz-button >关闭全部</button>-->
        </ng-template>


        <div class="flex-1 overflow-auto content-box">
          <router-outlet class="main-content"></router-outlet>
        </div>

        <!--<router-outlet></router-outlet>-->
      </div>
    </nz-content>
    <nz-footer>Ant Design ©2020 Implement By Angular</nz-footer>
  </nz-layout>
</nz-layout>
